<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
  <title>JRoll图集查看器</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      background: #dadada;
      overflow: hidden
    }
    
    header {
      height: 44px;
      line-height: 44px;
      text-align: center;
      background: #da020c;
      color: #fff;
    }
    
    header>a {
      height: 34px;
      line-height: 34px;
      position: absolute;
      top: 5px;
      left: 10px;
    }
    
    h1 {
      margin: 0;
      padding: 0;
      font-size: 18px;
      font-weight: normal;
    }

    p {
      padding: 0 0 0 10px;
      margin: 10px 0 0 0;
    }
    
    #wrapper {
      position: absolute;
      top: 44px;
      bottom: 0;
      width: 100%;
    }
    
    #div1,
    #div2 {
      margin: 0;
      padding: 0;
    }

    #div1::after {
      content: "";
      clear: both;
      display: block;
      width: 100%;
      height: 20px;
    }
    
    #div1 img,
    #div2 img {
      display: block;
      width: 44%;
      height: 70px;
      margin-left: 4%;
      margin-top: 4%;
      float: left;
    }
  </style>
  <script src="../../src/jroll.js"></script>
  <script src="./jroll-viewer.js"></script>
</head>

<body>
  <header>
    <h1>JRoll图集查看器</h1>
    <a onclick="javascript:history.back()">&lt;返回</a>
  </header>
  <div id="wrapper">
    <p>点击图片打开图集，单指滑动，双指缩放</p>
    <div id="div1">
      <img src="http://www.chjtx.com/JRoll1/images/1.jpg" jroll-viewer-image>
      <img src="http://ww1.sinaimg.cn/orj480/006003lPjw1f6wuv37rikj30u02x216z.jpg" jroll-viewer-image>
      <img src="http://www.chjtx.com/JRoll1/images/2.jpg" jroll-viewer-image>
      <!--<img src="http://image.diyiyou.com/game/2014/08/1409296997_4.jpg" jroll-viewer-image>-->
      <img src="https://farm4.staticflickr.com/3920/15008465772_383e697089_b.jpg" jroll-viewer-image>
    </div>
    <p>自定义对应大图</p>
    <div id="div2">
      <img src="http://www.chjtx.com/JRoll1/images/1.jpg" data-src="https://farm4.staticflickr.com/3920/15008465772_383e697089_b.jpg" jroll-viewer-image>
      <img src="http://ww1.sinaimg.cn/orj480/006003lPjw1f6wuv37rikj30u02x216z.jpg" data-src="http://www.chjtx.com/JRoll1/images/2.jpg" jroll-viewer-image>
      <img src="../../demos/images/qrcode.png">
    </div>
  </div>
  <script>
    var viewer = new JRollViewer('#div1', {afterSwitch: function (i) {
      console.log(i)
    }})
    var viewer2 = new JRollViewer('#div2', {zoomMax:100, data: 'src', JRoll: JRoll})
  </script>
</body>

</html>